<template>
    <div class="grid_table_div">
        <div :style="{'grid-template-columns':templateColumns, 'grid-template-rows':templateRows}"
             class="grid_table_data">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "tableGrid",
    props: {
        templateColumns: {
            type: String,
            default: '100px 120px repeat(3, 110px)'
        },
        templateRows: {
            type: String,
            default: 'repeat(3,minmax(40px,50px))'
        },
    },
}
</script>
<style lang="scss">
.grid_table_div {
    display: flex;
    flex-direction: column;
    user-select: none;
	margin: 10px;
}

.grid_table_data {
    display: grid;
    overflow: auto;
    border-top: 1px solid #e3e3e3;
    border-left: 1px solid #e3e3e3;
    min-height: calc(100vh - 210px);
    max-height: calc(100vh - 210px);
    
    > div {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        height: calc(100% - 22px);
        border-right: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
    }
}
</style>
